<template>
	<view>
		<view class="seach_view">
			<view class="seach_view_border flex">
				<image src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/seach_icon.png" class="seach_view_border_icon" mode=""></image>
				<input type="text" placeholder="请输入科室或医生" class="seach_view_border_input" v-model="keyword" placeholder-style="color: #999999;" />
				<view @click="search" class="seach_view_border_right">
					搜索
				</view>
			</view>
		</view>
		<scroll-view scroll-y="true" class="scroll" :style="{height:scrollH+'px'}">
			<view class="list">
				<view v-if="list.length==0" class="">
				    <u-empty text="列表数据为空" mode="list"></u-empty>
				   </view>
				<view class="list_item" v-for="(item,index) in list" :key="index">
					<view class="list_item_top flex">
						<image :src="item.avatar" class="list_item_top_left" mode=""></image>
						<view class="list_item_top_right">
							<view class="list_item_top_right_top flex1 ">
								<view class="list_item_top_right_top_left flex1">
									<view class="list_item_top_right_top_left_left"></view>
									<view class="list_item_top_right_top_left_right">
										在线
									</view>
								</view>
								<view class="list_item_top_right_top_min">
									{{item.name}}
								</view>
								<u-rate size="14" :readonly="true" :count="count" v-model="value" activeColor="#0165FB"></u-rate>
							</view>
							<view class="list_item_top_right_bottom flex1">
								<view class="list_item_top_right_bottom_item">
									{{item.level.name}}
								</view>
								<view class="list_item_top_right_bottom_tiao"></view>
								<view class="list_item_top_right_bottom_item">
									{{item.department.name}}
								</view>
								<view class="list_item_top_right_bottom_tiao"></view>
								<view class="list_item_top_right_bottom_item">
									{{item.hospital.name}}
								</view>
								<view class="jibie">
									{{item.hospital.level.name}}
								</view>
							</view>
						</view>
					</view>
					<view class="list_item_min flex">
						<view class="list_item_min_item ">
							<view class="list_item_min_item_top">
								<text style="font-size: 24rpx;">¥</text>{{item.tag1_price}}/次
							</view>
							<view class="list_item_min_item_bottom">
								图文咨询
							</view>
						</view>
						<view class="list_item_top_right_bottom_tiao"></view>
						<view class="list_item_min_item ">
							<view class="list_item_min_item_top">
								<text style="font-size: 24rpx;">¥</text>{{item.tag2_price}}/次
							</view>
							<view class="list_item_min_item_bottom">
								视频咨询
							</view>
						</view>
						<view class="list_item_top_right_bottom_tiao"></view>
						<view class="list_item_min_item ">
							<view class="list_item_min_item_top">
								<text style="font-size: 24rpx;">¥</text>{{item.tag3_price}}/次
							</view>
							<view class="list_item_min_item_bottom">
								飞刀咨询
							</view>
						</view>
					</view>
					<view class="list_item_bottom flex">
						<view class="list_item_bottom_left">
							月回答量 <text class="list_item_bottom_left_num">{{item.month_count}}</text>
						</view>
						<view class="list_item_bottom_right flex1">
							<image src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/wx_img.png" class="list_item_bottom_right_img"  mode=""></image>
							<view @click="go_DoctorDetails(item)" class="list_item_bottom_right_text">
								问医生
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import { doctor } from '../../../api/login.js';
	import getScrollHeight from "@/utils/utils.js";
	export default {
		data() {
			return {
				keyword:'',
				scrollH:'',
				list:[]
			}
		},
		onReady() {
			let t = this
			getScrollHeight.getScrollHeight('scroll').then(res=>{
				t.scrollH = res - 20
			})	
		},
		onLoad(op) {
			this.keyword = op.name;
			this.getDoctor(op.name);
		},
		methods: {
			search(){
				this.getDoctor(this.keyword);
			},
			getDoctor(name){
				let params = {
					name: name,
					size: 10
				}
				doctor(params).then(res=>{
					if(res.code == 200001){
						this.list = res.data.data;
					}
				})
			},
			go_DoctorDetails(data) {
				uni.navigateTo({
					url: '/pages/DoctorDetails/DoctorDetails?id=' + data.id
				})
			}
		}
	}
</script>

<style>
.seach_view {
	height: 88rpx;
	padding: 0 30rpx;
	box-sizing: border-box;
	background: #EFF5FF;
	display: flex;
	align-items: center;
}
.seach_view_border {
	width: 100%;
	height: 64rpx;
	border-radius: 32rpx;
	border: 1rpx solid rgba(255, 255, 255, 0.5);
	padding: 0 30rpx;
	box-sizing: border-box;
	background: #fff;
}
.seach_view_border_icon {
	width: 44rpx;
	height: 44rpx;
}
.seach_view_border_input {
	width: calc(100% - 183rpx);
	color: #333;
	font-family: Alibaba PuHuiTi 2;
	font-size: 26rpx;
	font-weight: 400;
}
.seach_view_border_right{
	width: 108rpx;
	height: 24rpx;
	line-height: 24rpx;
	color: #0165FB;
	font-size: 26rpx;
	font-weight: 400;
	text-align: center;
	border-left: 1rpx solid #DFDFDF;
}
.scroll{
		margin-top: 10rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
	}
	.list{
		margin-top: -10rpx;
	}
	.list_item{
		margin-top: 20rpx;
		width: 100%;
		padding: 32rpx;
		box-sizing: border-box;
		background: linear-gradient(180deg, #EFF5FF 18.23%, rgba(255, 255, 255, 0.5) 70%);
		border-radius: 20rpx;
	}
	.list_item_top_left{
		width: 88rpx;
		height: 88rpx;
		border-radius: 50%;
		background: #ccc;
	}
	.list_item_top_right{
		width: calc(100% - 100rpx);
	}
	.list_item_top_right_top_left{
		border-radius: 100rpx;
		padding: 6rpx 12rpx;
		border: 0.5px solid #DDD;
	}
	.list_item_top_right_top_left_left{
		width: 14rpx;
		height: 14rpx;
		border-radius: 50%;
		background: #31EC87;
	}
	.list_item_top_right_top_left_right{
		color: #666;
		font-family: Alibaba PuHuiTi;
		font-size: 20rpx;
		font-weight: 400;
		margin-left: 5rpx;
	}
	.list_item_top_right_top_min{
		color: #222;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 32rpx;
		font-weight: 700;
		margin: 0 12rpx;
	}
	.list_item_top_right_bottom{
		margin-top: 8rpx;
	}
	.list_item_top_right_bottom_tiao{
		width: 1rpx;
		height: 22rpx;
		background: #DFDFDF;
		margin: 0 12rpx;
	}
	.list_item_top_right_bottom_item{
		color: #444;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 26rpx;
		font-weight: 400;
	}
	.jibie{
		display: inline-block;
		padding: 4rpx 12rpx;
		border-radius: 8rpx;
		background: linear-gradient(270deg, #FFF4EC 0%, #FFF3D9 98.44%);
		color: #E7980F;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 20rpx;
		font-weight: 400;
		margin-left: 12rpx;
	}
	.list_item_min{
		margin-top: 40rpx;
	}
	.list_item_min_item{
		width: 200rpx;
		text-align: center;
	}
	.list_item_min_item_bottom{
		color: #444;
		text-align: center;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 22rpx;
		font-weight: 400;
		margin-top: 12rpx;
	}
	.list_item_min_item_top{
		color: #333;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 28rpx;
		font-weight: 400;
	}
	.list_item_bottom{
		margin-top: 30rpx;
	}
	.list_item_bottom_left{
		color: #999;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 26rpx;
		font-weight: 400;
	}
	.list_item_bottom_left_num{
		color: #333;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 36rpx;
		font-weight: 700;
		margin-left: 6rpx;
	}
	.list_item_bottom_right{
		width: 244rpx;
		height: 64rpx;
		border-radius: 32rpx;
		background:linear-gradient(270deg, #0165FB 0%, #7AA7EB 100%);
		justify-content: center;
	}
	.list_item_bottom_right_img{
		width: 36rpx;
		height: 36rpx;
	}
	.list_item_bottom_right_text{
		color: #FFF;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 26rpx;
		font-weight: 700;
		margin-left: 12rpx;
	}
</style>
